<!DOCTYPE html>
<!--
    // MetroTile JavaScript library v1.0.0 sample html
    // (c) Lance Wynn - http://metrotile.codeplex.com/
    // License: MIT (http://www.opensource.org/licenses/mit-license.php)

    -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Metro Tile Sample Page</title>
    <link type="text/css" href="css/tile.css" rel="stylesheet" />
    <script src="scripts/jquery-1.7.1.js"></script>
    <script src="scripts/metro.tile.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.tile').metroTile({
                slideDirection: tileDirections.top, //front tile will be on top.
                duration: 500, //the transition animation will be 2-4 seconds.
                delay: 5000, //the delay between potential tile state switches (front, back, or peek) will be 5-10 seconds.
                showFrontOnMouseEnter: true, //if this is true, the tile will jump to the front when the mouse enters the tile
                isTileActive: true //if this is true, the tile will randomly switch between the states depending on the delay;
            });

            $('.tileleft').metroTile({
                slideDirection: tileDirections.left, //front tile will be left of the back.
                duration: 250, //the transition animation will be 2-4 seconds.
                delay: 5000, //the delay between potential tile state switches (front, back, or peek) will be 5-10 seconds.
                showFrontOnMouseEnter: true, //if this is true, the tile will jump to the front when the mouse enters the tile
                isTileActive: true //if this is true, the tile will randomly switch between the states depending on the delay;
            });

            $('.tileslide').metroTile({
                slideDirection: tileDirections.top, //front tile will be on top.
                duration: 250, //the transition animation will be 2-4 seconds.
                delay: 5000, //the delay between potential tile state switches (front, back, or peek) will be 5-10 seconds.
                showFrontOnMouseEnter: true, //if this is true, the tile will jump to the front when the mouse enters the tile
                isTileActive: true, //if this is true, the tile will randomly switch between the states depending on the delay;
                tileTransition: tileTransitions.slide
            });

            $('.tilenomouse').metroTile({
                slideDirection: tileDirections.top, //front tile will be on top.
                duration: 250, //the transition animation will be 2-4 seconds.
                delay: 5000, //the delay between potential tile state switches (front, back, or peek) will be 5-10 seconds.
                showFrontOnMouseEnter: false, //if this is true, the tile will jump to the front when the mouse enters the tile
                isTileActive: true //if this is true, the tile will randomly switch between the states depending on the delay;
            });

            //I know this is hacky, but it gives a simple example of grabbing the tile behavior, and interacting with it.
            $('button').click(function () {
                var methodToCall = this.textContent;
                var metroTiles = $('.tile, .tileleft, .tileslide, .tilenomouse').metroTile(
                    function (tile) {
                        tile[methodToCall](250);
                    });

            });
        });
    </script>
</head>
<body>
    <button>showFront</button>
    <button>showBack</button>
    <button>peek</button>
    Below is a sample tile 250 x 250, will rotate between front and back, and switch to front when mouse enters:
    <br />
    <div class="tile" style="width: 250px; height: 250px; background-color: purple; color: white;">
        <div>
            <img src="images/Barnicles.jpg" />
        </div>
        <div style="padding: 3px;">
            Oh no! I got a barnacle stuck to my back! Now I'm obligated to pay for it's college I guess...Just kidding, that's my son...and I probably will end up paying for his college...
        </div>
    </div>
    <br />
    <br />
    Here are 2 smaller tiles, will rotate and transition left and right, and switch to front:<br />
    <div class="tileleft" style="width: 125px; height: 125px; float: left; background-color: red; color: white;">
        <div>
            <img src="images/FeedingTheBirds.jpg" />
        </div>
        <div style="padding: 3px;">
            We had a lot of fun feeding the birds at the aviary!
        </div>
    </div>
    <div class="tileleft" style="width: 125px; height: 125px; background-color: lightgreen;">
        <div>
            <img src="images/FunAtTheAviary.jpg" />
        </div>
        <div style="padding: 3px;">
            More fun at the aviary!
        </div>
    </div>
    <br />
    <br />
    Here I embedded the same 2 tiles in a larger tile (250 x 125) kind of a fun effect, don't know how useful it is tho...
    <br />
    the smaller tiles will slide between front and back, and the main tile will rotate and respond to mouse events.
    <br />
    <div class="tile" style="width: 250px; height: 125px; background-color: blue; color: white;">
        <div>
            <div class="tileslide" style="width: 125px; height: 125px; float: left; background-color: red;">
                <div>
                    <img src="images/FeedingTheBirds.jpg" />
                </div>
                <div style="padding: 3px;">
                    We had a lot of fun feeding the birds at the aviary!
                </div>
            </div>
            <div class="tileslide" style="width: 125px; height: 125px; float: left; background-color: green">
                <div>
                    <img src="images/FunAtTheAviary.jpg" />
                </div>
                <div style="padding: 3px;">
                    More fun at the aviary!
                </div>
            </div>
        </div>
        <div>
            Here I've embedded 2 smaller tiles in the front of this larger tile! Tiles are fun!
        </div>
    </div>
    <br />
    <br />
    And here's a tile with just text, this tile will rotate, but will not respond to the mouse enter:

    <div class="tilenomouse" style="width: 250px; height: 250px; background-color: purple; color: white;">
        <div style="background-color: teal; padding-left: 3px;">
            <h1>This is the front of the tile!</h1>
            Maybe you can put a headline in here, or something...
        </div>
        <div style="padding: 3px;">
            <h1>This is the back of the tile.</h1>
            You can put other stuff here as was demonstrated earlier.
        </div>
    </div>

</body>
</html>
